<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fresh Direct</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<!-- DataTables CSS -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.css">

		<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script>

	
	
	<style type="text/css" class="init">

	</style>
		
	
	<script type="text/javascript" language="javascript" >


$(document).ready(function() {
    $('#allproducts').dataTable( {
        
        "ordering": true,
        "info":     false
        
    } );
} );
	</script>

</head>
<body>
    
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="${contextPath}"><img width="100" src="https://www.freshdirect.com/media/images/navigation/global_nav/fd_logo_on.gif"></img></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
          <li><h4>Welcome to FreshDirect! Administrator Page</h4></li>	
      </ul>
      <ul class="nav navbar-nav navbar-right">

          <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Administrator <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="${contextPath}/admin/home">Home</a></li>
                <li><a href="${contextPath}/admin/topclients">Top Clients</a></li>
                <li><a href="${contextPath}/admin/newproduct">Manage Products</a></li>
                <li><a href="${contextPath}/admin/viewusers">View Users</a></li>
                <li class="divider"></li>
                <li><a href="${contextPath}/admin/signout">Sign Out</a></li>
              </ul>
            </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
        <nav class="navbar navbar-default" role="navigation" style="background-color: #728d4b; border-radius: 10px;">
  <div class="container-fluid" style="background-color: #728d4b; border-radius: 10px; ">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" style="background-color: #728d4b" id="bs-example-navbar-collapse-2">
      <ul class="nav navbar-nav" style="background-color: #728d4b">
        <li style="background-color: #728d4b"><a style="background-color: #728d4b; color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/admin/home">Home</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif; " href="${contextPath}/admin/topclients">Top Clients</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/admin/newproduct">Manage Products</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/admin/viewusers">View Users</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Add new product
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="container">
                    <div class="row-fluid" style="text-align: center;"><h2><div style="font-family: 'Oswald', sans-serif; font-weight: bold; color:#FFAE19;">Add new product</div></h2><br></div>
                    <div class="row-fluid">
                        <div class="col-md-2"></div>
                        <div class="col-md-8">
                        <form:form action="newproduct" commandName="productForm">
                          <div class="row-fluid">
                          <div class="col-md-4">  
                          <div class="form-group">
                            <label for="exampleInputEmail1">Product Name</label>
                            <form:input class="form-control" path="name" placeholder="Product Name"/>
                            <font color="red"><form:errors path="name"/></font>
                          </div>
                          <div class="form-group">
                            <label for="exampleInputPassword1">Description</label>
                            <form:textarea rows="6" class="form-control" id="exampleInputPassword1" path="description" placeholder="Enter Description"/>
                            <font color="red"><form:errors path="description"/></font>
                          </div>
                          <div class="form-group">
                            <label for="exampleInputPassword1">Product Image</label>
                             <form:input class="form-control" id="exampleInputPassword1" path="image" placeholder="Enter Minimum Stock increase"/>
                             <font color="red"><form:errors path="image"/></font>
                            </div>
                          </div>
                          <div class="col-md-4">
                          <div class="form-group">
                              <label for="sel1">Group</label>
                              <form:select class="form-control" path="prodGroup" id="sel1">
                                  <form:option value="1">Fruits</form:option>
                                  <form:option value="2">Vegetables</form:option>
                                  <form:option value="3">Seafood</form:option>
                                  <form:option value="4">Meat</form:option>
                                  <form:option value="5">Dairy</form:option>
                                   <form:option value="6">Bakery & Pastry</form:option>
                                   <form:option value="7">Cereal & Palses</form:option>
                                   <form:option value="8">Frozen</form:option>
                                   <form:option value="9">Canned Food</form:option>
                                   <form:option value="10">Flowers</form:option>
                                   <form:option value="11">Pet</form:option>
                              </form:select>
                          </div>
                          <div class="form-group">
                            <label for="exampleInputPassword1">List Price</label>
                            <form:input class="form-control" id="exampleInputPassword1" path="price" placeholder="Enter List Price"/>
                          </div>
                          <div class="form-group">
                            <label for="exampleInputPassword1">Quantity on Hand</label>
                            <form:input class="form-control" id="exampleInputPassword1" path="quantity" placeholder="Enter quantity on hand"/>
                          </div>
                          <div class="form-group">
                            <label for="exampleInputPassword1">Stock limit</label>
                            <form:input class="form-control" id="exampleInputPassword1" path="procurLevel" placeholder="Enter Stock limit"/>
                          </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label for="sel1">Suppliers</label>
                              <ul>
                              
                              <form:checkboxes element="li" path="supplierIDs" items="${supplierIDs}"/>  
                              </ul>
                          </div>
                            <div class="form-group">
                            <label for="exampleInputPassword1">Minimum Stock increase</label>
                             <form:input class="form-control" id="exampleInputPassword1" path="procurQuantity" placeholder="Enter Minimum Stock increase"/>
                            </div>
                           
                               <div style="text-align: right; bottom: 0;">
                                <button type="submit" class="btn btn-primary btn-lg">Save Product</button></div>
                              </div>
                           </div>
                             
                        </form:form>
                          </div>  
                    </div>
                    </div>
    </div>
    </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          List of all products
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
    
          <div class="container" style="width:1100px;">
                    <div class="row-fluid" style="text-align: center;"><h2><div style="font-family: 'Oswald', sans-serif; font-weight: bold; color:#FFAE19;">All the products</div></h2><br></div>
                    <div class="row-fluid">
                    <c:choose>
                    <c:when test="${fn:length(products) != 0}">
                    <table id="allproducts" class="table table-striped table-bordered" cellspacing="0" width="1100">
				<thead>
					<tr>
						<th>ID</th>
                                                <th></th>
						<th>Name</th>
						<th>Description</th>
						<th>Group</th>
						<th>Price</th>
						<th>Quantity</th>
                                                <th>Proc. Level</th>
                                                <th>Proc. Quantity</th>
                                                <th></th>
					</tr>
				</thead>
				<tbody>
				<c:forEach var="product" items="${products}" varStatus="loop"> 
                                    <tr>
                                        <td>${product.getId()}</td>
                                        <td><img src="${product.getImage()}" width="30"></td>
                                        <td>${product.getName()}</td>
                                        <td style="text-align: justify; font-size: 12px">${product.getDescription()}</td>
                                        <td>
                                            ${product.getProdGroup()}
                                        </td>
                                        <td>${product.getPrice()}</td>
                                        <td <c:if test="${product.getProcurLevel() >= product.getQuantity()}" > style="color: red; font-weight: bold;" </c:if>>${product.getQuantity()}</td>
                                        <td>${product.getProcurLevel()}</td>
                                        <td>${product.getProcurQuantity()}</td>
                                        <td>
                                            <form action="${contextPath}/product/stockup" class="navbar-form">
                                            <input type="hidden" name="id" value="${product.getId()}">
                                            <div class="input-group">
                                            <input type="text" class="form-control" pattern="\d*" name="n" <c:if test="${product.getProcurLevel() >= product.getQuantity()}" >value="${product.getProcurQuantity()}"</c:if> style="width:50px;">
                                            <span class="input-group-btn">
                                            <button type="submit" class="btn btn-default" value="update">Stock Up</button>
                                            </span>
                                            </div>
                                            </form>
                                        </td>
                                   </tr>
                               </c:forEach>     
                               </tbody>
			</table>
                     </c:when>
                    <c:otherwise>
                        <div class="alert alert-warning" style="text-align: center;" role="alert">There are not products in ${id} category</div>
                    </c:otherwise>
                    </c:choose>
                    </tbody>
                    </div>
   </div>     
      </div>
    </div>
  </div>
    </div>
 
</body>
</html>